<template>
  <div>
    <h1>显示每个同学的详情</h1>
    <h1>{{ result.name }}</h1>
    <!-- <h1>{{ result.detail.height1 }}</h1> -->
    <h1>{{ result.detail.age }}</h1>
    <h1>{{ result.detail.hobby }}</h1>
  </div>
</template>

<script>
export default {
  //   props: ["students"],
  data() {
    return {
      studentDetail: [
        {
          id: "01",
          name: "洋洋",
          detail: {
            height1: "180cm",
            age1: 19,
            hobby: "肤白貌美大长腿",
          },
        },
        {
          id: "02",
          name: "chaochao",
          detail: {
            height1: "177cm",
            age1: 22,
            hobby: "爱王洋洋",
          },
        },
        {
          id: "03",
          name: "jianing",
          detail: {
            height1: "160cm",
            age: 18,
            hobby: "面膜",
          },
        },
      ],
      result: {},
    };
  },
  /* 
  根据传递过来的query参数进行查询 id  01  02  03

  this.$route.query.id
  根据传递过来的id从studentDetail当中查询对应的数据
  
  */
  mounted() {
    // console.log(this.students);
    /*   console.log(this.studentDetail);
    console.log(this.$route.query.id); */
    /* let result = this.studentDetail.find((item) => {
      return item.id == this.$route.query.id;
    });
    console.log(result);
    this.result = result; */
    this.showItem(this.$route);
  },
  watch: {
    $route(value) {
      console.log(value);
      /* let result = this.studentDetail.find((item) => {
        return item.id == value.query.id;
      });
      console.log(result);
      this.result = result; */
      this.showItem(value);
    },
  },
  methods: {
    showItem(value) {
      if (this.studentDetail[0].detail.height1) {
        let result = this.studentDetail.find((item) => {
          return item.id == value.query.id;
        });
        console.log(result);
        this.result = result;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
h1 {
  font-size: 50px;
  font-weight: 700;
}
</style>